<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>规格管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->                
                    <div class="box-header with-border">
                        <h3 class="box-title">规格管理</h3>
                    </div>
                    <div class="box-body">
                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除" onclick="deleteId()"><i class="fa fa-trash-o"></i> 删除</button>
                                        
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
								<div class="has-feedback">
							                    规格名称：<input type="text" id="specName">
									<input type="button" value="查询" class="btn btn-default" onclick="getData()">
                                </div>
							</div>
                            <!--工具栏/-->
			                  <!--数据列表-->
							<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
							</table>
			                  <!--数据列表/-->
							<a href="javascript:toPage(3)">首页</a>
							<a href="javascript:toPage(1)">上一页</a>
							<a href="javascript:toPage(2)">下一页</a>
							<a href="javascript:toPage(4)">尾页</a>
							当前第<input type="text" id="pageNumber" size="1">页
							每页<input type="text" id="pageSize" size="1">条
							共<input type="text" id="totalPage" readonly="readonly" size="1">页
							共<input type="text" id="totalCount" readonly="readonly" size="1">条
                        </div>
                        <!-- 数据表格 /--> 
                     </div>
                    <!-- /.box-body -->                    
	          		    
                                
<!-- 增加窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">规格编辑</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>规格名称</td>
		      		<td><input  class="form-control" placeholder="规格名称" name="specName" id="specNameId">  </td>
		      	</tr>
			 </table>				
			 
			 <!-- 规格选项 -->
			 <div class="btn-group">
                  <button type="button"  onclick="addTable(1)" class="btn btn-default" title="新建" ><i class="fa fa-file-o"></i> 新增规格选项</button>
             </div>
			 <table id="specOption" class="table table-bordered table-striped table-hover dataTable" >
                    <thead>
                        <tr>
				      <th class="sorting">规格选项</th>
				      <th class="sorting">排序</th>																
                      <th class="sorting">操作</th>	
                    </thead>
                    <tbody id="addForm">
                    </tbody>
			  </table> 
			
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="save()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>


  <!-- 修改窗口 -->
  <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" >
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3 id="myModalLab">规格编辑</h3>
              </div>
              <div class="modal-body">

                  <table class="table table-bordered table-striped"  width="800px" id="specNameIdInfo">

                      <tr>

                          <td>规格名称</td>
                          <td><input  class="form-control" placeholder="规格名称" name="specName" id="specNameId1"></td>
                          <td><input type="hidden" id="id"></td>
                      </tr>
                  </table>

                  <!-- 规格选项 -->
                  <div class="btn-group">
                      <button type="button"  onclick="addTable(2)" class="btn btn-default" title="新建" ><i class="fa fa-file-o"></i> 新增规格选项</button>
                  </div>
                  <table id="specOption1" class="table table-bordered table-striped table-hover dataTable" >
                      <thead>
                      <tr>
                          <th class="sorting">规格选项</th>
                          <th class="sorting">排序</th>
                          <th class="sorting">操作</th>
                      </thead>
                      <tbody id="updateForm">
                      </tbody>
                  </table>


              </div>
              <div class="modal-footer">
                  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="update()">保存</button>
                  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
              </div>
          </div>
      </div>
  </div>

</body>

</html>
<script>
	$(function () {
		getData();
	})

	function getData() {
		$.ajax({
			url:"/tbSpecification/getShow",
			data:{specName:$("#specName").val(),pageNumber : $("#pageNumber").val()},
			dataType:"json",
			type:"post",
			async : false,
			success:function (data) {
				var show = data.data
			    let result = show.list;
				var table = " <thead>";
				table += "<tr>";
				table += " <th class=\"\" style=\"padding-right:0px\">";
				table += " <input id=\"selall\" type=\"checkbox\"  class=\"icheckbox_square-blue\">";
				table += "</th>";
				table += "<th  class=\"sorting_asc\">ID</th>";
				table += "<th class=\"sorting\">品牌首字母</th>";
				table += "<th class=\"text-center\">操作</th>";
				table += "</tr>";
				table += " </thead>";

				for (var i = 0; i < result.length; i++) {
					table += "<tbody>";
					table += "<tr>";
					table += "<td>"
					table +="<input  type=\"checkbox\" value='"+result[i].id +"' name='check'> "
					table +="</td>"
					table += "<td> "+ result[i].id + "</td>";
					table += "<td>" + result[i].specName + "</td>";
					table += "<td class='text-center'> ";
					table += " <button type=\"button\" class=\"btn bg-olive btn-xs\" data-toggle=\"modal\"  data-target=\"#edit\" onclick='toUpdate("+result[i].id+")'>修改</button> ";
					table += "</td>";
					table += "</tr>";

				}
				table += "</tbody>";
				$("#dataList").html(table);
				$("#pageNumber").val(show.pageNumber);
				$("#totalPage").val(show.totalPage);
				$("#pageSize").val(show.pageSize);
				$("#totalCount").val(show.totalCount);
			},
			error:function () {
				alert("网络异常")
			}
		})
	}
	function toPage(flag) {
		var pageNumber = parseInt($("#pageNumber").val());
		var totalPage = parseInt($("#totalPage").val());
		if (flag == 1){
			if (pageNumber <= 1){
				alert("已经是首页了");
				return;
			}
			$("#pageNumber").val(pageNumber-1);
		}
		if (flag == 2){
			if (pageNumber >= totalPage){
				alert("已经是最后一页");
				return;
			}
			$("#pageNumber").val(pageNumber+1);
		}
		if (flag == 3){
			if (pageNumber <= 1){
				alert("已经是首页了");
				return;
			}
			$("#pageNumber").val(1);
		}
		if (flag == 4){
			if (pageNumber >= totalPage){
				alert("已经是尾页了");
				return;
			}
			$("#pageNumber").val(totalPage);
		}
		getData();
	}
	function save() {
		var optionList = [];
		var trs = $("#specOption").find("tr");
		for (let i = 1; i <trs.length; i++) {
		var  tds = $(trs[i]).find("td");
		var optionName = $(tds[0]).find("input").val();
		var orders = $(tds[1]).find("input").val();
			optionList.push({optionName:optionName,orders:orders});
		}
		var optionListJson= JSON.stringify(optionList)
		console.log(optionListJson);
		$.ajax({
			url : "/tbSpecification/save",
			type : "post",
			data: {optionListJson : optionListJson,specName : $("#specNameId").val()},
			dataType : "json",
			async : true,
			success : function (result) {

			    alert("增加成功")
					window.location.reload();
				},
			error : function () {
				alert("网络异常");
			}

		})
	}
	function addTable(flag){
		var table= "<tr>";
		table += "<td>";
		table += " <input  class=\"form-control\" placeholder=\"规格选项\">";
		table += "</td>";
		table += "<td>";
		table += "<input  class=\"form-control\" placeholder=\"排序\">";
		table += "</td>";
		table += "<td>";
		table += "<button type=\"button\" class=\"btn btn-default\" title=\"删除\" onclick='deleteTable(this)'><i class=\"fa fa-trash-o\"></i> 删除</button>";
		table += "</td>";
		table += "</tr>";
          if (flag ==1){
              $("#addForm").append(table);
          }
          if (flag ==2){
              $("#updateForm").append(table)
          }


	}

	function deleteTable(obj){
		$(obj).parents("tr").remove();
	}
	function toUpdate(id) {
		$.ajax({
			url : "/tbSpecification/update?id="+id,
			type : "post",
			dataType : "json",
			async : true,
			success : function (data) {
			     var result =data.data
			    $("#specNameId1").val(result[0].specName);
			    $("#id").val(result[0].id)
                var table =""
                for (var i = 0; i < result.length; i++) {
                    table += "<tr>";
                    table += "<td>";
                    table += " <input  class=\"form-control\" placeholder=\"规格选项\" value="+ result[i].optionName + ">";
                    table += "</td>";
                    table += "<td>";
                    table += "<input  class=\"form-control\" placeholder=\"排序\" value="+ result[i].orders +">";
                    table += "</td>";
                    table += "<td>";
                    table += "<button type=\"button\" class=\"btn btn-default\" title=\"删除\" onclick='deleteTable(this)'><i class=\"fa fa-trash-o\"></i> 删除</button>";
                    table += "</td>";
                    table += "</tr>";
                }
                $("#updateForm").html(table);
            },
			error : function () {
				alert("网络异常");
			}

		})
	}
	function update() {
            var arr = [];
            var trObjs = $("#specOption1").find("tr");
            for (var i = 1; i < trObjs.length; i++) {
                var tdObjs = $(trObjs[i]).find("td");
                var inputs = $(tdObjs[0]).find("input");
                var optionName = $(inputs).val();
                var order = $(tdObjs[1]).find("input").val();
                var optionJson = {optionName: optionName, orders: order};
                arr.push(optionJson);
            }
            var arrStr = JSON.stringify(arr);
            console.log(arrStr);
            $.ajax({
                url: "/tbSpecification/updateInfo",
                data: {id: $("#id").val() ,specName: $("#specNameId1").val(), tbSpecificationJson: arrStr},
                type: "post",
                dataType: "json",
                async: true,
                success: function (result) {
                     if (result.code=10000){
                         alert(result.message)

                     }else{
                         alert(result.message)
                     }

                    window.location.reload();
                },
                error: function () {
                    alert("系统错误");
                }
            })
    }
    function deleteId(){
        var ids = [];
        $("[name=check]").each(function (i,e) {
            if ($(e).prop("checked")){
                ids.push($(e).val())
            }
        })

        $.ajax({
            url : "/tbSpecification/deleteAll",
            type : "post",
            data: {ids : ids},
            dataType : "json",
            async : true,
            success : function (data) {
                    alert("删除成功");
                    window.location.reload();

            },
            error : function () {
                alert("网络异常");
            }

        })
    }




</script>